<template>
  <view class="bar">
    <input v-model="val" :placeholder="placeholder" @confirm="search" />
    <button @click="search">搜索</button>
    <button @click="reset">重置</button>
  </view>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({ modelValue: String, placeholder: String })
const emit  = defineEmits(['update:modelValue', 'search', 'reset'])
const val = ref(props.modelValue)
watch(() => props.modelValue, v => val.value = v)
watch(val, v => emit('update:modelValue', v))
const search = () => emit('search')
const reset  = () => { val.value = ''; emit('reset') }
</script>
<style scoped>
.bar{ display:flex; gap:12rpx; padding:20rpx 0; }
input{ flex:1; }
button{ padding:10rpx 20rpx; background:#007aff; color:#fff; border-radius:6rpx; font-size:26rpx; }
</style>